<template>
  <div class="content">
    <div class="first"> <span class="bule"></span> 新增角色</div>
    <div class="box">
      <div class="pass">编辑角色信息</div>
      <div class="confirm">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="账号" prop="roleName">
            <el-input v-model="form.name" style="width: 250px;" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="roleDes">
            <el-input v-model="form.pass" style="width: 250px;" placeholder="请输入内容"></el-input>
          </el-form-item>

          <el-form-item label="是否启用">
            <el-switch v-model="form.isshow" @change="show"></el-switch>
          </el-form-item>
          <el-form-item label="权限管理" style="font-weight: bolder;">
            <el-checkbox-group v-model="form.type"
              style="border: 1px solid rgba(109, 105, 105, 0.144);width: 500px; box-sizing: border-box; padding-left: 30px;">
              <div>
                <el-checkbox label="医生管理" style="font-weight: 600;" name="type"></el-checkbox>
              </div>
              <el-checkbox v-model="checkedKeys" value="" label="新增医生信息" name="type"></el-checkbox>
              <el-checkbox v-model="checkedKeys" value="" label="删除医生信息" name="type"></el-checkbox>
              <el-checkbox v-model="checkedKeys" value="" label="导入" name="type"></el-checkbox><br>
              <el-checkbox v-model="checkedKeys" value="" label="导出" name="type"></el-checkbox>
              <el-checkbox v-model="checkedKeys" value="" label="编辑医生信息" name="type"></el-checkbox>
              <el-checkbox label="delmany" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" :disabled="!form.isshow">确认</el-button>
            <!-- 事件确认跳转 -->
            <el-button @click="resetForm('ruleForm')" type="primary" plain>取消</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>
</template> 
<script>
import { getRight } from '@/api/syssetting/index.js'
export default {
  data() {
    return {
      rules: {
        roleName: [
          { required: true, message: "请输入内容", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        roleDes: [
          { required: true, message: "请输入内容", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      form: {
        add: '',
        del: '',
        leadin: '',
        leatout: '',
        edit: '',
        delmany: '',
        name: '',
        pass: '',
        isshow: false,
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      checkedKeys: []
    }
  },
  methods: {
    show() {

    },
    submitForm(submit) {
      getRight({
        adminname: this.form.name,
        password: this.form.pass,
        role: 1,
        checkedKeys: [this.form.add]
      }).then(res => {
      })
      setTimeout(() => {
        // this.$router.push({path: 'role'})
      }, 500)

    }
  }
}
</script>

<style scoped>
.bule {
  vertical-align: 3px;
  display: inline-block;
  width: 20px;
  height: 10px;
  border-radius: 999px;
  background: #006EFF;
  margin-right: 8px;
}

.content {
  width: 921px;
  min-height: 333px;

}

.first {
  font-size: 20px;
  padding-top: 13px;
  padding-bottom: 22px;

}

.box {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.pass {
  height: 40px;
  font-size: 10px;
  color: #006EFF;
  line-height: 40px;
  box-sizing: border-box;
  padding-left: 15px;
  background-color: rgba(242, 242, 242, 1);
  color: bl;
}

.confirm {
  box-sizing: border-box;
  padding-top: 10px;
}

el-input {
  width: 250px;
}
</style>